//
// 变量
//


//== 字体
@font-family-base:                  "MicrosoftYaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-size-small:                   14px;
@font-size-base:                    16px;
@font-size-medium:                  18px;
@font-size-large:                   20px;

//== 颜色
@black:                             #000000;
@white:                             #ffffff;

@gray-darker:                       #222222;
@gray-dark:                         #333333; 
@gray:                              #656565; 
@gray-light:                        #999999;
@gray-lighter:                      #eeeeee;

@primary:                           #3280ff; 
@primary-darkblue:                  #337ab7;
@primary-green:                     #1cce4e;
@success:                           #5cb85c;
@info:                              #5cb85c;
@warning:                           #f0ad4e;
@danger:                            #fe3d3d;

//== 脚手架
@body-margin:                       0;
@body-color:                        @black;
@body-bg:                           @gray-lighter;

@line-height-base:                  1.428571429;
@line-height-medium:                2;
@line-height-large:                 3;
@line-height-computed:              floor((@font-size-base * @line-height-base)); 

@link-color:                        @gray-dark;
@link-hover-color:                  @gray;
@link-hover-decoration:             none;

//== 排版
@hr-border:                         @gray-lighter;

@page-header-padding:               0 0 10px;
@page-header-border-bottom:         @component-border;
@page-header-font-size:             @font-size-large;

//== 图标字体
@icon-font-path:                    "../fonts/";
@icon-font-name:                    "glyphicons-halflings-regular";
@icon-font-svg-id:                  "glyphicons_halflingsregular";

//== 媒体查询断点
@screen-xs:                         480px;
@screen-xs-min:                     @screen-xs;
@screen-phone:                      @screen-xs-min;

@screen-sm:                         768px;
@screen-sm-min:                     @screen-sm;
@screen-tablet:                     @screen-sm-min;

@screen-md:                         992px;
@screen-md-min:                     @screen-md;
@screen-desktop:                    @screen-md-min;

@screen-lg:                         1200px;
@screen-lg-min:                     @screen-lg;
@screen-lg-desktop:                 @screen-lg-min;

@screen-xl:                         1400px;
@screen-xl-min:                     @screen-xl;
@screen-xs-desktop:                 @screen-xl-min;

@screen-xs-max:                     (@screen-sm-min - 1);
@screen-sm-max:                     (@screen-md-min - 1);
@screen-md-max:                     (@screen-lg-min - 1);
@screen-lg-max:                     (@screen-xl-min - 1);


//== 栅格系统
@grid-columns:                      12;
@grid-gutter-width:                 0;
@grid-float-breakpoint:             @screen-sm-min;
@grid-float-breakpoint-max:         (@grid-float-breakpoint - 1);


//== 容器尺寸
@container-tablet:                  (720px + @grid-gutter-width);
@container-sm:                       @container-tablet;
@container-desktop:                 (940px + @grid-gutter-width);
@container-md:                      @container-desktop;
@container-large-desktop:           (1140px + @grid-gutter-width);
@container-lg:                      @container-large-desktop;

//== 组件
@component-full-width:              @screen-md;
@component-height:                  45px;
@component-margin:                  20px;
@component-padding:                 20px;
@component-border:                  thin solid @gray-lighter;
@component-border-radius:           5px;
@component-color:                   @gray-light;
@component-bg:                      @white;
@component-active-border:           thin solid @primary;
@component-active-color:            @gray-dark;
@component-active-bg:               @gray-lighter;
@component-hover-color:             @gray-dark;
@component-hover-bg:                @gray-lighter;
@component-foucs-color:             @gray-dark;
@component-foucs-bg:                @gray-light;
@component-disabled-bg:             @gray-lighter;

//== 状态
@state-success-text:                #3c763d;
@state-success-bg:                  #dff0d8;
@state-success-border:              darken(spin(@state-success-bg, -10), 5%);

@state-info-text:                   #31708f;
@state-info-bg:                     #d9edf7;
@state-info-border:                 darken(spin(@state-info-bg, -10), 7%);

@state-warning-text:                #8a6d3b;
@state-warning-bg:                  #fcf8e3;
@state-warning-border:              darken(spin(@state-warning-bg, -10), 5%);

@state-danger-text:                 #a94442;
@state-danger-bg:                   #f2dede;
@state-danger-border:               darken(spin(@state-danger-bg, -10), 5%);

//== 导航
@navbar-height:                     @component-height;
@navbar-min-width:                  @component-full-width;
@navbar-margin-bottom:              @component-margin;
@navbar-color:                      @component-color;
@navbar-bg:                         @component-bg;

@navbar-brand-width:                60px;
@navbar-brand-margin-left:          @component-margin;
@navbar-brand-bg:                   @component-active-bg;
@navbar-brand-line-height:          @line-height-large;

@navbar-nav-margin-left:            @component-margin;
@navbar-nav-line-width:             @line-height-large;
@navbar-nav-padding:                10px 6px;
@navbar-nav-color:                  @component-active-color;

@navbar-text-padding:               10px 20px;
@navbar-text-border:                @component-border;

//== 内容
@content-margin-bottom:             @component-margin;
@content-min-width:                 @screen-md;
@content-height:                    865px;

//== 菜单
@menu-width:                        250px;
@menu-height:                       865px;
@menu-margin-left:                  @component-margin;
@menu-color:                        @component-color;
@menu-bg:                           @component-bg;
@menu-box-shadow:                   0 0 30px 8px #bbb;

@menu-header-bottom-margin:         @component-margin;
@menu-header-height:                @component-height;
@menu-header-border:                @component-border;

@menu-item-color:                   @gray-light;
@menu-item-padding:                 8px 15px;
@menu-item-hover-color:             @component-hover-color;
@menu-item-hover-bg:                @component-hover-bg;

//==面包屑
@breadcrumb-active-color:           @gray-light;

//== 选项卡
@tab-left:                          290px;
@tab-height:                        865px;
@tab-padding:                       20px;
@tab-box-shadow:                    0 0 30px 8px #bbb;

@tab-header-height:                 @component-height;

//== 表格
@table-max-width:                   200px;
@table-border-radius:               @component-border-radius;

@table-header-color:                @component-active-color;
@table-header-font-size:            @font-size-base;

@table-row-hover-bg:                @gray-lighter;
@table-row-anger-color:             @danger;

@table-cell-border:                 @component-border;
@table-cell-padding:                6px;
@table-cell-color:                  @component-color;
@table-cell-line-height:            @line-height-base;

@table-condensed-cell-padding:      4px 1em;
@table-condensed-cell-font-size:    @font-size-small;

@table-hover-bg:                    @gray-lighter;
@table-active-bg:                   lighten(@primary, 20%);

//== 列表组
@list-group-padding:                10px 1em;
@list-group-border:                 @component-border;
@lisg-group-color:                  @component-color;
@list-group-bg:                     @white;

@list-group-item-hover-color:       @component-hover-color;
@list-group-item-hover-bg:          @component-hover-bg;

@list-group-item-heading-color:     @component-active-color;

//== 表单
@form-group-padding:                20px;

@form-label-padding:                8px 0;
@form-label-color:                  @component-active-color;

@form-control-height:               (@line-height-computed + (5 * 2) + 2);
@form-control-padding:              5px 1em;
@form-control-border:               @component-border;
@form-control-color:                @gray-light;
@form-control-bg:                   @component-bg;
@form-control-focus-border-color:   @primary;
@form-control-disabled-bg:          @component-disabled-bg;

@form-help-block-color:             @component-color;
@form-help-blokc-font-size:         @font-size-small;

@form-success-border-color:         @primary;               
@form-success-color:                @primary;
@form-success-bg:                   @primary;

@form-warning-border-color:         @warning;               
@form-warning-color:                @warning;
@form-warning-bg:                   @warning;

@form-error-border-color:           @danger;               
@form-error-color:                  @danger;
@form-error-bg:                     @danger;

//== 输入组
@input-group-padding:               @form-control-padding;
@input-group-color:                 @form-control-color;
@input-group-bg:                    @form-control-bg;
@input-group-border:                @form-control-border;
@input-group-hover-color:           @primary;

@input-group-small-padding:         1px .5em;

@input-group-large-padding:         10px 1em;

//== 分页
@pagination-margin:                 20px 0 0;
@pagination-padding:                5px 1em;
@pagination-border:                 @component-border;
@pagination-border-radius:          @component-border-radius;
@pagination-color:                  @component-color;
@pagination-bg:                     @white;
@pagination-activate-border:        @component-active-border;
@pagination-activate-color:         @white;
@pagination-activate-bg:            @primary;
@pagination-hover-bg:               @component-active-bg;
@pagination-disabled-bg:            @component-active-bg;
@pagination-line-height:            @line-height-medium;

//== 进度条
@progress-width:                    100%;
@progress-height:                   22px;
@progress-padding:                  3px;
@progress-border-radius:            20px;
@progress-bg:                       @component-active-bg; 

@progress-bar-border-radius:        20px;
@progress-bar-color:                @white;
@progress-bar-bg:                   @primary;
@progress-bar-success-bg:           @primary;
@progress-bar-info-bg:              @info;
@progress-bar-warning-bg:           @warning;
@progress-bar-danger-bg:            @danger;
@progress-bar-line-height:          @line-height-base;
@progress-bar-font-size:            @font-size-small;

//== 里程碑
@milestone-width:                   12px;
@milestone-height:                  12px;
@milestone-border-radius:           10px;

@milestone-default-border:          thin solid @gray-light;
@milestone-default-bg:              @gray-light;

@milestone-primary-border:          thin solid @primary;
@milestone-primary-bg:              @primary;

@milestone-success-border:          thin solid @success;
@milestone-success-bg:              @success;

@milestone-info-border:             thin solid @info;
@milestone-info-bg:                 @info;

@milestone-warning-border:          thin solid @warning;
@milestone-warning-bg:              @warning;

@milestone-danger-border:           thin solid @danger;
@milestone-danger-bg:               @danger;

//== 面板
@panel-margin:                      @component-margin 0;
@panel-padding:                     10px 1em;
@panel-border:                      @component-border; 
@panel-border-radius:               6px;
@panel-bg:                          @component-active-bg;
@panel-font-size:                   @font-size-large;

//== 按钮
@btn-focus-border-color:            @primary;
@btn-border:                        thin solid transparent;
@btn-border-radius:                 @component-border-radius;
@btn-padding:                       2px .5em;
@btn-color:                         @primary;
@btn-bg:                            @component-bg;
@btn-font-size:                     @font-size-base;
@btn-line-height:                   @line-height-base;

@btn-default-border:                thin solid @primary;
@btn-default-color:                 @primary;
@btn-default-bg:                    @white;

@btn-primary-border:                thin solid @primary;
@btn-primary-color:                 @white;
@btn-primary-bg:                    @primary;

@btn-success-border:                thin solid @success;
@btn-success-color:                 @white;
@btn-success-bg:                    @success;

@btn-info-border:                   thin solid @info;
@btn-info-color:                    @white;
@btn-info-bg:                       @info;

@btn-warning-border:                thin solid @warning;
@btn-warning-color:                 @warning;
@btn-warning-bg:                    @white;

@btn-danger-border:                 thin solid @danger;
@btn-danger-color:                  @danger;
@btn-danger-bg:                     @white;

@btn-small-padding:                 5px 1em;
@btn-small-border-radius:           25px;
@btn-small-font-size:               @font-size-small;
@btn-small-line-height:             @line-height-base;

@btn-medium-padding:                5px 1.5em;
@btn-medium-border-radius:          25px;
@btn-medium-font-size:              @font-size-large;
@btn-medium-line-height:            @line-height-base;

 //== 模态对话框
@model-zindex:                      1100;
@model-bg:                          @component-bg;
@model-border:                      @component-border;

@modal-backdrop-bg:                 @black;
@model-backdrop-zindex:             1099;
@modal-backdrop-opacity:            0.5;

@model-header-padding:              @component-padding;
@model-header-border-bottom:        @component-border;

@model-title-line-height:           @line-height-medium;

@model-body-padding:                @component-padding;

@model-footer-padding:              @component-padding;
@modal-footer-border:               @component-border;

 //== 关闭图标
@close-color:                       @black;
@close-text-shadow:                 0 1px 0 @white;
@close-line-height:                 @line-height-medium;
@close-font-size:                   (@font-size-base * 1.5);
@close-font-weight:                 bold;

//== 时间线
@time-line-padding:                 @component-padding 0;

//== 下拉框列表
@caret-top-border:                  4px solid @primary;
@caret-left-right-border:           4px solid transparent;
@caret-width-base:                  4px;
@caret-width-large:                 5px;

@dropdown-border:                   @component-border;
@dropdown-bg:                       @component-bg;
@dropdown-zindex:                   1000;
@dropdown-divider-bg:               #e5e5e5;

@dropdown-link-color:               @gray-dark;
@dropdown-link-hover-color:         darken(@gray-dark, 5%);
@dropdown-link-hover-bg:            #f5f5f5;
@dropdown-link-active-color:        @component-active-color;
@dropdown-link-active-bg:           @component-active-bg;
@dropdown-link-disabled-color:      @gray-light;
@dropdown-header-color:             @gray-light;
@dropdown-caret-color:              #000;

//== 日期选择器
@datepicker-border-radius:          4px;
@datepicker-dropdown-border:        7px solid @white;
@datepicker-dropdown-bg:            6px solid @white;
@datepicker-disabled-color:         @gray-lighter;
@datepicker-highlighted-bg:         @component-active-bg;

//== 多选下拉框
@color-red-error:                   rgb(185, 74, 72);
@color-grey-arrow:                  rgba(204, 204, 204, 0.2);
@width-default:                     220px;
@zindex-select-dropdown:            1060; 
@input-color-placeholder:           #999;

//== 工具提示
@tooltip-max-width:                 200px;
@tooltip-color:                     #fff;
@tooltip-bg:                        #000;
@tooltip-opacity:                   .9;

@tooltip-arrow-width:               5px;
@tooltip-arrow-color:               @tooltip-bg;
@tooltip-zindex:                    1070;

//== 弹窗框
@popover-bg:                          #fff;
@popover-max-width:                   400px;
@popover-border-color:                rgba(0,0,0,.2);
@popover-fallback-border-color:       #ccc;

@popover-title-bg:                    darken(@popover-bg, 3%);

@popover-arrow-width:                 10px;
@popover-arrow-color:                 @popover-bg;
@popover-arrow-outer-width:           (@popover-arrow-width + 1);
@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
@popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
@popover-zindex:                      1060;